<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发现 22001010525-王婕</title>
    <link rel="stylesheet" href="wang_css/faxian.css">
    <script src="./wang_fonts/iconfont.js"></script>
    <link rel="stylesheet" href="./wang_css/swiper-bundle.min.css">
    <script src="./wang_js/swiper-bundle.min.js"></script>
       
</head>
<body>
  
  <header class="wang_header">
    <div class="top">
        <div class="search">
            <div class="swiper s2">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">大家正在搜： 猎罪图鉴</div>
                    <div class="swiper-slide">大家正在搜： 监控人类</div>
                    <div class="swiper-slide">大家正在搜： 香奈儿杭州大秀</div>
                    <div class="swiper-slide">大家正在搜： 刺杀小说家</div>
                    <div class="swiper-slide">大家正在搜： 灿烂的花园</div>
                </div>
            </div>
            <button class="search-btn">搜索</button>
        </div>
    </div>
</header>


  <main class="wang_main">
    <div class="tab">
		<div class="t-title">
			<span class="cur">发现</span>
			<span>趋势</span>
			<span>问题</span>
			<span>榜单</span>
		</div>
        <!-- 发现 -->
		<div class="tc">
            <div class="left">
                <ul class="clist">
                    <li>
                        <a href="#">于正抄袭琼瑶败诉6年后才道歉</a>
                    </li>
                    <li>
                        <a href="#">韩国首尔爆发示威游行</a>
                    </li>
                    <li>
                        <a href="#">猎罪图鉴</a>
                    </li>
                    <li>
                        <a href="#">异色边缘竞技赛开始</a>
                    </li>
                    <li>
                        <a href="#">春节申遗成功各地文物组团祝贺</a>
                    </li>
                    
                </ul>
            </div>
            <div class="right">
                <ul class="clist">
                    <li>
                        <li>
                            <a href="#">大连东软信息学院</a>
                        </li>
                        <li>
                            <a href="#">大连初雪</a>
                        </li>
                        <li>
                            <a href="#">音乐厂牌SEEWE官宣</a>
                        </li>
                        <li>
                            <a href="#">来东北上学还得学东北话啊</a>
                        </li>
                        <li>
                            <a href="#">春节申遗成功</a>
                        </li>
                </ul>
            </div>
    <section class="wang_ad">
            <div class="swiper-container">
              <ul class="list swiper-wrapper"></ul>
          </div>
          <div class="container">
              <div class="category-item">
                  <img src="./wang_images/faxian/ad/wu.jpg" >
                  <div class="category-text">微博商城</div>
              </div>
              <div class="category-item">
                  <img src="./wang_images/faxian/ad/xian.jpg" >
                  <div class="category-text">音乐</div>
              </div>
              <div class="category-item">
                  <img src="./wang_images/faxian/ad/nuan.jpg" >
                  <div class="category-text">热聊</div>
              </div>
              <div class="category-item">
                  <img src="./wang_images/faxian/ad/nuan2.jpg" >
                  <div class="category-text">无限暖暖</div>
              </div>
              <div class="category-item">
                  <img src="./wang_images/faxian/ad/gong.jpg" >
                  <div class="category-text">全球公测</div>
              </div>
              <div class="category-item">
                  <img src="./wang_images/faxian/ad/ce.jpg" >
                  <div class="category-text">更多</div>
              </div>
          </div>
      </section>
    </div>
   <!-- 微博趋势 -->
		<div class="tc"> 
            <div class="trend-section">
            <div class="trend-title">
              <h2>微博趋势</h2>
              <span>2.4小时 讨论主题</span>
            </div>
        </div>
        <div class="trending-topic">
            <h3>国乒夺冠</h3>
            <p>599871</p>
            <span class="focus-label">今日焦点</span>
            <span class="hot-count">39个热搜</span>
        </div>
        <div class="trending-topic">
            <h3>女硕士走丢</h3>
            <p>1589475</p>
            <span class="focus-label">今日焦点</span>
            <span class="hot-count">15个热搜</span>
        </div>
        <div class="trending-topic">
            <h3>A股行情</h3>
            <p>1589475</p>
            <span class="focus-label">今日焦点</span>
            <span class="hot-count">13个热搜</span>
        </div>
        <div class="trending-topic">
            <h3>大连</h3>
            <p>1589475</p>
            <span class="focus-label">今日焦点</span>
            <span class="hot-count">13个热搜</span>
        </div>
        <div class="trending-topic">
            <h3>大连东软</h3>
            <p>1589475</p>
            <span class="focus-label">今日焦点</span>
            <span class="hot-count">13个热搜</span>
        </div>
        <div class="trending-topic">
            <h3>大连东软信息学院</h3>
            <p>1589475</p>
            <span class="focus-label">今日焦点</span>
            <span class="hot-count">13个热搜</span>
        </div>
        <div class="trending-topic">
            <h3>东软信息学院</h3>
            <p>1589475</p>
            <span class="focus-label">今日焦点</span>
            <span class="hot-count">13个热搜</span>
        </div>
        <div class="trending-topic">
            <h3>大连初雪</h3>
            <p>1589475</p>
            <span class="focus-label">今日焦点</span>
            <span class="hot-count">13个热搜</span>
        </div>
        </div>
 <!-- 问题 -->
		<div class="tc">
            <div class="trend-section">
                <div class="trend-title">
                  <h2>热门问题</h2>
                  <span>从问题出发 发现精彩微博</span>
                </div>
            </div>
            <div class="container1"></div>
              <div class="container1">
                <img src="./wang_images/faxian/main/2.jpg">
                <div class="text1">
                  <h2>成功的关键因素是什么？</h2>
                  <p>33万 + 热度 @自我的sz等发博</p>
                </div>
              </div>
              <div class="container1">
                <img src="./wang_images/faxian/main/2.jpg">
                <div class="text1">
                  <h2>快速恢复身心状态</h2>
                  <p>155万 + 热度 @小笔尖等发博</p>
                </div>
              </div>
              <div class="container1">
                <img src="./wang_images/faxian/main/2.jpg">
                <div class="text1">
                  <h2>正确提升生活质量</h2>
                  <p>10万 + 热度 @新等发博</p>
                </div>
              </div>
              <div class="container1">
                <img src="./wang_images/faxian/main/2.jpg">
                <div class="text1">
                  <h2>脚踝冷如何影响全身健康</h2>
                  <p>180万 + 热度 @笔尖等发博</p>
                </div>
              </div>
              <div class="container1">
                <img src="./wang_images/faxian/main/2.jpg">
                <div class="text1">
                  <h2>如何运用大量美术素材增强剧情艺术感？</h2>
                  <p>175万 + 热度 @笔尖等发博</p>
                </div>
              </div>
              <div class="container1">
                <img src="./wang_images/faxian/main/3.jpg">
                <div class="text1">
                  <h2>如何增强剧情艺术感？</h2>
                  <p>5万 + 热度 @新加坡小笔尖等发博</p>
                </div>
              </div>
              <div class="container1">
                <img src="./wang_images/faxian/main/2.jpg">
                <div class="text1">
                  <h2>如何运用大量美术素材增强剧情艺术感？</h2>
                  <p>175万 + 热度 @笔尖等发博</p>
                </div>
              </div>
            </div>
                <!-- 榜单 -->
		<div class="tc">
           
            <div class="huadong">
                <div class="swiper s1">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <p>v影响力</p>
                        </div>
                        <div class="swiper-slide">
                            <p>人物榜</p>
                        </div>
                        <div class="swiper-slide">
                            <p>星IP榜</p>
                        </div>
                        <div class="swiper-slide">
                            <p>剧集榜</p>
                        </div>
                        <div class="swiper-slide">
                            <p>综艺榜</p>
                        </div>
                        <div class="swiper-slide">
                            <p>电影榜</p>
                        </div>
                        <div class="swiper-slide">
                            <p>音乐榜</p>
                        </div>
                        <div class="swiper-slide">
                            <p>电商榜</p>
                        </div>
                        <div class="swiper-slide">
                            <p>电商榜</p>
                        </div>
                        <div class="swiper-slide">
                            <p>游戏影响力</p>
                        </div>
                        <div class="swiper-slide">
                            <p>汽车榜</p>
                        </div>
                        <div class="swiper-slide">
                            <p>手机榜</p>
                        </div>
                        <div class="swiper-slide">
                            <p>游戏品牌榜</p>
                        </div>
                        <div class="swiper-slide">
                            <p>美妆榜</p>
                        </div>
                        <div class="swiper-slide">
                            <p>家居榜</p>
                        </div>
                        <div class="swiper-slide">
                            <p>母婴榜</p>
                        </div>
                        <div class="swiper-slide">
                            <p>体育榜</p>
                        </div>
                        <div class="swiper-slide">
                            <p>旅游榜</p>
                        </div>
                        <div class="swiper-slide">
                            <p>美食榜</p>
                        </div>
                    <div class="swiper-slide">
                        <p>+</p>
                </div>
                    
                </div>
            </div>
        </div>
        <div class="hot-people-ranking">
            <h2>热门人物榜</h2>
            <div class="person-item">
              <img src="./wang_images/faxian/main/r1.jpg" >
              <div class="person-details">
                <span class="name">赵丽颖</span>
                <span class="status">已关注</span>
                <p>#赵丽颖带想想看泉州烟花秀#</p>
              </div>
            </div>
            <div class="person-item">
              <img src="./wang_images/faxian/main/r2.jpg">
              <div class="person-details">
                <span class="name">白敬亭</span>
                <span class="status">+关注</span>
                <p>#白敬亭晒粉丝送的数学题#</p>
              </div>
            </div>
            <div class="person-item">
              <img src="./wang_images/faxian/main/r3.jpg">
              <div class="person-details">
                <span class="name">王阳0313</span>
                <span class="status">+关注</span>
                <p>#王阳 十个勤天值得#</p>
              </div>
            </div>
            <div class="person-item">
              <img src="./wang_images/faxian/main/r4.jpg">
              <div class="person-details">
                <span class="name">白鹿my</span>
                <span class="status">已关注</span>
                <p>#白鹿被抓到偷玩手机的反应#</p>
              </div>
            </div>
            <div class="person-item">
              <img src="./wang_images/faxian/main/r5.jpg">
              <div class="person-details">
                <span class="name">酒酿熊子</span>
                <span class="status">+关注</span>
                <p>我笑晕过去了。。。昨晚的...</p>
              </div>
            </div>
          </div>
            <!-- V影影响力榜 -->
            <div class="hot-people-ranking">
                <h2>V影影响力榜</h2>
                <div class="person-item">
                  <img src="./wang_images/faxian/main/v1.jpg" >
                  <div class="person-details">
                    <span class="name">荷兰豆本豆豆荷</span>
                    <span class="status">已关注</span>
                    <p>电影博主</p>
                  </div>
                </div>
                <div class="person-item">
                  <img src="./wang_images/faxian/main/v2.jpg">
                  <div class="person-details">
                    <span class="name">电影娱乐家</span>
                    <span class="status">+关注</span>
                    <p>微博电影点评团成员 电影博...</p>
                  </div>
                </div>
                <div class="person-item">
                  <img src="./wang_images/faxian/main/v3.jpg">
                  <div class="person-details">
                    <span class="name">燃烧的雾港水手</span>
                    <span class="status">+关注</span>
                    <p>情感博主</p>
                  </div>
                </div>
                <div class="person-item">
                  <img src="./wang_images/faxian/main/v4.jpg">
                  <div class="person-details">
                    <span class="name">黑光乍泄</span>
                    <span class="status">已关注</span>
                    <p>电影博主</p>
                  </div>
                </div>
                <div class="person-item">
                  <img src="./wang_images/faxian/main/v5.jpg">
                  <div class="person-details">
                    <span class="name">爱詹姆斯迪恩</span>
                    <span class="status">+关注</span>
                    <p>电影博主</p>
                  </div>
                </div>
              </div>

	</div>
 

   

     <!-- 下导航 -->
     <nav class="wang_nav">
        <ul>
            <li>
                <a href="weibo(guanzhu).html">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye1"></use>
                    </svg>
                    <p>微博</p>
                </a>
            </li>
            <li>
                <a href="shipin.html">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shipin"></use>
                    </svg>
                    <p>视频</p>
                </a>
            </li>
            <li>
                <a href="faxian.html">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sousuo1"></use>
                    </svg>
                    <p>发现</p>
                </a>
            </li>
            <li>
                <a href="xiaoxi.html">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiaoxi2"></use>
                    </svg>
                    <p>消息</p>
                </a>
            </li>
            <li>
                <a href="wo.html">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wo"></use>
                    </svg>
                    <p>我</p>
                </a>
            </li>
        </ul>

    </nav>
    

  </main>
  <footer class="wang_footer">
    <script src="./wang_js/tab.js"></script>
    <script>
    
    var swiper1 = new Swiper(".s1", {
         slidesPerView: 5,
         spaceBetween: 5,
       });
    </script>
<script>
    
 var swiper3 = new Swiper(".s2", {
            direction: "vertical",
            autoplay: {
                delay: 2500,
                disableOnInteraction: false,
            },
        });



  const url1=`http://rap2api.taobao.org/app/mock/321669/weibo`
  const ul = document.querySelector(".list.swiper-wrapper");
// 使用fetch获得url，并加入到list中
fetch(url1)
  .then(res => res.json())
  .then(data => {
        console.log(data);
        data.forEach(item => {
            ul.innerHTML += `
            <li class="swiper-slide">
                <img src="${item.img}" alt="图片描述">
                <div class="txt">
                    ${item.txt}
                </div>
            </li>
            `;
        });
        const swiper = new Swiper('.swiper-container', {
                    slidesPerView: 1,
                    spaceBetween: 15,
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true
                    },
                    autoplay: {
                        delay: 3000,
                        disableOnInteraction: false 
                    }
                });
            });
const url4=`http://rap2api.taobao.org/app/mock/321669/faxian1`
//dom
const div = document.querySelector(".container1");
// 使用fetch获得url，并加入到list中
fetch(url4)
 .then(res => res.json())
 .then(data => {
        console.log(data);
        data.forEach(item => {
            div.innerHTML += `
            <div class="container1">
                <img src="${item.imgSrc}" alt="图片描述">
                <div class="text1">
                    <h2>${item.title}</h2>
                    <p>${item.heat} ${item.author}</p>
                </div>
            </div>
            `;
        });
    });

</script>


  </footer>
</body>
</html>
